<template>
    <div>
<h3>房型添加</h3>
<table class="table table-bordered">
    <tbody>
        <tr>
            <td>房间名称</td>
            <td>
                <input type="text" v-model="queryInfo.RoomName"/>
            </td>
        </tr>
        <tr>
            <td>门市价</td>
            <td>
                <input type="text" v-model="queryInfo.RoomPrice"/>
            </td>
        </tr>
        <tr>
            <td>押金</td>
            <td>
                <input type="radio" name="Money" :value="0" v-model="queryInfo.IsMoney"/>不需要
                <input type="radio" name="Money" :value="1" v-model="queryInfo.IsMoney"/>需要
                <span v-if="queryInfo.IsMoney==1"><input type="text" v-model="queryInfo.Money"/></span>
            </td>
        </tr>
        <tr>
            <td>房型面积</td>
            <td>
                <input type="text" v-model="queryInfo.RoomArea"/>
            </td>
        </tr>
        <tr>
            <td>可住人数</td>
            <td>
                <input type="number" :min="0" v-model="queryInfo.RoomLevel"/>
            </td>
        </tr>
        <tr>
            <td>可否加床</td>
            <td>
                <input type="radio" name="bed" :value="1" v-model="queryInfo.JiaChaung"/>不可加床
                <input type="radio" name="bed" :value="2" v-model="queryInfo.JiaChaung"/>免费加床
                <input type="radio" name="bed" :value="3" v-model="queryInfo.JiaChaung"/>收费加床
                <input type="radio" name="bed" :value="4" v-model="queryInfo.JiaChaung"/>自定义
            </td>
        </tr>
        <tr>
            <td>房型图片</td>
            <td>
                <input type="file" @change="ShowFile"/>
                <img :src="queryInfo.TypePhoto" width="150" height="100"/>
            </td>
        </tr>
        <tr>
            <td>房型介绍</td>
            <td>
                <textarea v-model="queryInfo.RoomSay"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" class="btn btn-primary" value="提交" @click="AddInsert"/>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
const Router=useRouter();
const Route=useRoute();
let queryInfo=reactive({
    RoomName:'',
    RoomPrice:'',
    IsMoney:0,
    Money:0,
    RoomArea:0,
    RoomLevel:0,
    JiaChaung:1,
    TypePhoto:'',
    RoomSay:''
})
///房型添加
const AddInsert=()=>{
    if(queryInfo.RoomName==''){
        alert("房间名称不能为空！");
        return;
    }
    if(queryInfo.RoomPrice==''){
        alert("门市价不能为空！");
        return;
    }
    if(isNaN(queryInfo.RoomLevel)){
        alert("请输入阿拉伯数字！");
        return;
    }
    if(queryInfo.RoomLevel==0){
        alert("可住人数不能为空！");
        return;
    }
    axios({
    url:'/api/Type/RoomTypeAdd',
    method:'post',
    data:queryInfo
    })
    .then((res)=>{
        console.log(res.data);
        if(res.data==-1){
            alert("房型名称重复，请重新提交！")
            return
        }
        if(res.data==1){
            alert("提交成功！");
            Router.push('/typeList')
        }
    })
    .catch((err)=>{
        console.log(err)
    })
}
///上传图片
const ShowFile=(R:any)=>{
var Y=R.target.files[0];
var G=new FormData();
G.append('file',Y);
axios({
    url:'/api/GetFile/UpFile',
    method:'post',
    data:G
})
.then((res)=>{
    console.log(res.data);
    queryInfo.TypePhoto=res.data
    if(res.data=="您上传的文件不符合类型，请上传图片！"){
        alert(res.data!)
        return
    }
    if(res.data=="您上传的图片超过2M"){
        alert(res.data!)
        return
    }
})
.catch((err)=>{
    console.log(err)
})
}
</script>

<style scoped>

</style>